<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            name:'mikaisa',
            age:100,
            location:'张家港'
        }

        let {name,...other} = obj;
        console.log(name,other);

        // ... 扩展运算符
        let obj1 = {
            name:'xiaoming',
            age:18
        }
        let obj2 = {
            name:'xiaohong',
            sex:'女'
        }
        //obj2和obj1都有name，那么会后者覆盖前者,obj3里的name就是xiaohong
        let obj3 = { ...obj1,...obj2 };

        // 利用这个后者覆盖前者的特点，我们可以做很多事情
        // 相信大家都用过jquery封装过的ajax或者说用过axios吧，他们似乎就能做到，你只传一个地址，他们就能默认使用get方法。那么怎么做到的呢？相信你心里知道了吧
        // 来看看寡人的演示
        function axios(options){
            let defaultOptions = {
                method:'get',
                params:{},
                timeout:10000
            }
            console.log({...defaultOptions,...options});
        }
        axios({
            url:'xxxx.com'
        });

        // 另外，通过扩展运算符也可以实现浅层的深拷贝，什么叫浅层的深拷贝呢？就是只有第一层的属性会被深拷贝，再往后嵌套的对象就是浅拷贝了
        let obj4 = {
            name:'zzz'
        }
        let obj5 = {...obj4};//对于这种只有一层的对象，那就是深拷贝

        let obj6 = {
            obj:{
                name:'xxx'
            },
            name:'ccc'
        }
        let obj7 = {...obj6};//对于obj6这种有嵌套的对象，只有第一层被深拷贝了，从第二层开始依然是浅拷贝
    </script>
</body>

</html>